*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    font-size: 10px;
}
.container{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.header{
    width: 100%;
    background: white;
    img{
        width: 100%;
    }
}
.phone-body{
    position: relative;
    z-index: 9;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}
.section-text{
    width: 100%;
    padding: 3rem 5rem;
    box-sizing: border-box;
}

.copy-write{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 2.4rem;
    .theme{
        min-width: 23%;
        h4{
            position: relative;
            font-size: 2rem;
            margin: 1rem 0;
        }
        h2{
            position: relative;
            line-height: 6rem;
            font-size: 4.5rem;
            span{
                display: block;
            }
        }
    }
    .text{
        position: relative;
        font-size: 1.6rem;
        padding: 1.6rem 0;
    }
}

.phone-image{
    position: relative;
    z-index: 99;
    text-align: center;
    padding: 10rem 0 10rem 0;
    overflow: hidden;
    .phone_left{
        width: 15%;
        transform: translateX(0%);
        margin-right: 2%;
    }
    .phone_right{
        width: 15%;
        transform: translateX(0%);
        margin-left: 2%;
    }
    .phone_text{
        width: 40%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
    }
    .phone_center{
        width: 25%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
    }
}

.banner{
    width: 90%;
    margin: 0 auto;
    padding: 10rem 0;
    .swiper-container{
        width: 100%;
        height: 40vw;
        border-radius: 3rem;
        overflow: hidden;
    }
    .swiper-slide{
        position: relative;
    }
    .orange {
        background: #ffdbc6;

        img {
            &:nth-child(1) {
                width: 36%;
                left: 15%;
                bottom: -40%;
                z-index: 1;
            }

            &:nth-child(2) {
                width: 36%;
                left: 30%;
                bottom: -60%;
            }
        }
    }
    .green{
        background: #ace3e5;
        img{
            &:nth-child(1){
                width: 48%;
                left: 40%;
                bottom: 40%;
            }
            &:nth-child(2){
                width: 48%;
                left: 25%;
                top: 40%;
            }
        }
    }
    .purple{
        background: #e0daf5;
        img{
            &:nth-child(1){
                width: 34%;
                left: 30%;
                bottom: -40%;
            }
            &:nth-child(2){
                width: 38%;
                left: 41%;
                bottom: -30%;
            }
        }
    }
    .black{
        background: #dbdbdb;
        img{
            &:nth-child(1){
                width: 25%;
                left: 27%;
                bottom: -30%;
            }
            &:nth-child(2){
                width: 25%;
                left: 45%;
                bottom: -30%;
            }
        }
    }
    .swiper-slide img{
        position: absolute;
    }
    .swiper-pagination{
        position: absolute;
        width: auto;
        left: auto;
        bottom: 10%;
        right: 10%;
    }
    .my-bullet {
        display: inline-block;
        width: 1.3vw;
        height: 1.3vw;
        border-radius: 50%;
        background: #000;
        margin: 0 0.5rem;
    }
    .my-bullet:nth-child(1){
        color: #ff6b29;
        background: #ff6b29;
    }
    .my-bullet:nth-child(2){
        color: #16c196;
        background: #16c196;
    }
    .my-bullet:nth-child(3){
        color: #9676ff;
        background: #9676ff;
    }
    .my-bullet:nth-child(4){
        color: #434040;
        background: #434040;
    }
    .my-bullet-active{
        border: 0.3rem solid #fff;
        box-sizing: border-box;
        box-shadow: 0 0 1rem;
    }
    .swiper-line{
        width: 4vw;
        height: 0.3rem;
        background: #fff;
        position: absolute;
        left: 5%;
        top: 10%;
        z-index: 666;
    }
    .swiper-name, .swiper-num {
        font-size: 4rem;
        height: 4.5rem;
        line-height: 4.5rem;
        overflow: hidden;
        color: #fff;
        position: absolute;
        left: 5%;
        top: 15%;
        z-index: 666;
    }
    .swiper-name span{
        display: block;
        position: relative;
        top: 0;
    }
    .swiper-num{
        left: auto;
        top: 10%;
        right: 5%;
    }
    .swiper-num span{
        display: block;
        position: relative;
        top: 0;
    }
}

@keyframes mySlideInUp {
    0% {
        transform: translateY(20%);
        visibility: visible;
        /*opacity: 0;*/
    }
    100% {
        transform: translateY(0);
        /*opacity: 1;*/
    }
}
.mySlideInUp {
    animation-name: mySlideInUp
}
@keyframes mySlideInDown {
    0% {
        transform: translateY(-20%);
        visibility: visible;
    }

    100% {
        transform: translateY(0);
    }
}
.mySlideInDown {
    animation-name: mySlideInDown
}

.camera{
    width: 100%;
    background: #f8f8f8;
    position: relative;
    z-index: 399;
    padding: 10rem 5rem;

    .camera_center{
        position: relative;
        text-align: center;
        padding: 30rem 0;
        z-index: 199;
        .pic_s5_pc{
            position: absolute;
            width: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50% ,-50%);
            z-index: 99;
            display: block;
        }
        .pic_s5_pc_allphone{
            position: absolute;
            width: 50%;
            top: 136%;
            left: 50%;
            transform: translate(-50% ,-50%);
            z-index: 98;
            opacity: 1;
            display: none;
        }
        .pic_s6_pc_1{
            position: absolute;
            width: 50%;
            top:136%;
            left: 50%;
            transform: translate(-50% ,-50%);
            opacity:0.5;
            display: none;
            z-index: 119;
        }
        .pic_s6_pc_5{
            position: absolute;
            width: 14.5%;
            opacity: 0;
            top:32%;
            left: 50%;
            transform: translate(-50% ,-50%);
            z-index: 109;
            border-radius: 0;
        }
        .pic_s6_pc_3{
            position: absolute;
            width: 10%;
            top: 22.5%;
            left: 50%;
            transform: translate(-50%,-50%);
            opacity: 0;
            border-radius: 5%;
        }
        .pic_s6_pc_4{
            position: absolute;
            width: 10%;
            top: 22.5%;
            left: 50%;
            transform: translate(-50%,-50%);
            opacity: 0;
            border-radius: 5%;
        }
    }
    .mobile_camera_center{
        .pic_s6_pc_3{
            opacity: 1;
            width: 27%;
            top: 50%;
            left: 15%;
        }
        .pic_s6_pc_5{
            opacity: 1;
            width: 27%;
            top: 50%;
        }
        .pic_s6_pc_4{
            opacity: 1;
            width: 27%;
            top: 50%;
            left: 85%;
        }
    }
}
.camera_1{
    margin-top: 5rem;
    .camera_1_center{
        text-align: center;
        img{
            width: 80%;
        }
    }
}


.camera_2{
    width: 100%;
    margin-top: 10rem;
    .camera_2_con{
        width: 100%;
        height: 100vh;
        position: relative;
    }
    .camera_2_center{
        position: absolute;
        text-align: center;
        top: 0;
        left: 50%;
        width: 70%;
        height: 80vh;
        transform: translate(-50%, 0);
        img{
            border-radius: 20px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}
.pc_dom{
    display: block;
}
.mobile_dom{
    display: none;
}
.chip{
    background-color: #000;
    height: 100vh;
    position: relative;
    width: 100%;
    overflow: hidden;
    #chip-con{
        width: 100%;
        height: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    #the-chip{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        box-shadow: 0 0 0 100vw black, 0 0 0 30px black inset;
        z-index: 10;
        min-width: 100px;
        min-height: 100px;
        background-color: #000;

        #chip-svg{
            width: 100%;
            height: 100%;
            opacity: 0;
        }

    }
    #the-chip.transparent {
        background-color: transparent;
    }
    h1 {
        position: absolute;
        left: 0;
        color: #fff;
        z-index: 20;
        font-family: Helvetica, serif;
        font-size: 6.4rem;
        letter-spacing: -1px;
        text-align: center;
        width: 100%;
        top: 30%;
        transform: translate(0, -50%);
        margin: 0;
    }
    video {
        height: 100vh;
        width: auto;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
    }
    #picture-iPhone-15-pro{
        position: absolute;
        width: 80%;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 13;
        img{
            width: 100%;
        }
    }
}
.rocket-chip{
    width: 100%;
    height: 100vh;
    padding: 4rem 0;
    box-sizing: border-box;
    background: #000;
    color: #86868b;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    .chip-text{
        padding: 0 18%;
        h1{
            margin-left: 8%;
            font-size: 8rem;
            color: #f5f5f7;
        }
    }
    .text-container{
        line-height: 1.381002381;
        font-weight: 600;
        letter-spacing: .011em;
        font-size: 2.1rem;
        margin-top: 4rem;
        display: flex;
        justify-content: space-around;
    }
    .stat{
        strong {
            color: #f5f5f7;
            font-size: 48px;
            line-height: 1.0834933333;
            font-weight: 600;
            letter-spacing: -0.003em;
            font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
            display: block;
            margin: 4px 0;
        }
        a{
            color: #86868b;
        }
    }
    .highlight{
        color: #f5f5f7;
    }
    .large-4 {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .m-30{
        margin-top: 3rem;
    }
}
.chip-M4{
    background-color: #000;
    height: 100vh;
    position: relative;
    width: 100%;
    video {
        width: 100%;
    }
    #the-chip_M4{
        width: 100.1%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 9;
        overflow: hidden;
        .mask-text{
            transform: scale(1);
        }
    }
}

.DJI_whole{
    width: 100%;
    height: 100vh;
    background: #000;
    position: relative;
    margin-bottom: -1px;
    img{
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    .style__whole_text{
        position: relative;
        height: 100%;
        width: 100%;
        text-align: center;
        .whole_text__feature, .whole_text__service{
            .pos_center();
            .text-linear-gradient();
            width: 60%;
            font-size: 2.8rem;
            background-image: linear-gradient(135deg, rgb(164, 164, 164), white, rgb(164, 164, 164));
            z-index: 5;
            top: 50%;
            opacity: 0;
        }
    }
    .style__whole_694{
        z-index: 9;
        bottom: 0;
    }


}
.DJI{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000000;
    .DJI_img{
        .pos_center();
        width: 100%;
        img{
            position: relative;
            bottom: 0;
            width: 100%;
        }
    }


    .pc_text{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 99;
        .center_text{
           .text-linear-gradient();
            text-align: center;
        }
        .style__desc-text___1yKdX{
            font-size: 24px;
            line-height: 32px;
            font-weight: 450;
            letter-spacing: -0.03em;
            color: white;
            text-align: center;
            opacity: 0;
        }

        .style__line-text-box___2lKKl{
            opacity: 0;
            .pos_center();
            &:nth-of-type(1){
                left: 30%;
                top: 60%
            }
            &:nth-of-type(2){
                text-align: right;
                left: 73%;
                top: 35%;
                .style__line___1h1bo{
                    right: 0;
                }
            }
            &:nth-of-type(3){
                left: 25%;
                top: 35%;
            }

        }
        .style__line-text-title___3heSp{
            .text-linear-gradient();
            font-size: 3.2rem;
            line-height: 4rem;
            background-image: linear-gradient(90deg, rgb(217, 94, 0), rgb(255, 178, 110), rgb(217, 94, 0));
            width: 30rem;
            padding-bottom: 1.6rem;
        }
        .style__line___1h1bo{
            position: absolute;
            background-color: rgba(255, 255, 255, 0.65);
            height: 1px;
            width: 0;
            max-width: 34rem;
        }
        .style__line-text-desc___10dbc{
            font-size: 1.6rem;
            line-height: 2.4rem;
            font-weight: 400;
            letter-spacing: -0.02em;
            color: rgba(255, 255, 255, 0.65);
            background-image: none;
            width: 30rem;
            transform: translateY(0.75px) translateZ(0px);
            padding-top: 1.6rem;
        }


    }

}
.pos_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.text-linear-gradient{
    width: 100%;
    font-weight: 600;
    font-size: 8rem;
    letter-spacing: -0.03em;
    padding: 0 0 1rem;
    color: transparent;
    background-image: linear-gradient(135deg, rgb(161, 253, 205), white, rgb(161, 253, 205));
    background-clip: text;
}

@media screen and (max-width: 1024px){
    .mobile_dom{
        display: block;
    }
    .pc_dom{
        display: none;
    }
    .camera .camera_center{
        padding: 18rem 0;
    }

    .camera_2{
        margin-top: 5rem;
        .camera_2_con{
            height: 80vw;
        }
        .camera_2_center{
            height: 70vw;
        }
    }

    .DJI{
        .DJI_img{
            top: 70%;
            width: 180%;
        }

        .pc_text{
            .style__desc-text___1yKdX{
                width: 80%;
                font-size: 3rem;
                line-height: 4.6rem;
            }
            .style__line-text-box___2lKKl{
                top: 25%!important;
                left: 32% !important;
                text-align: left!important;
                .style__line___1h1bo{
                    opacity: 0;
                }
                .style__line-text-desc___10dbc{
                    padding-top: 0;
                    width: 45rem;
                }
                .style__line-text-title___3heSp{
                    font-size: 5rem;
                    line-height: 6.4rem;
                }
                .style__line-text-desc___10dbc{
                    font-size: 3.2rem;
                    line-height: 4rem;
                }
            }
        }
    }
    .DJI_whole{
        .style__whole_text{
            .whole_text__feature{
                opacity: 1;
                top: 30%;
            }
            .whole_text__service{
                opacity: 1;
                top: 60%;
            }
        }
    }


}
@media screen and (max-width: 980px){
    .copy-write{
        flex-wrap: wrap;
        .theme{
            h2 {
                font-size: 3rem;
                line-height: 4rem;
                span{
                    display: inline;
                }
            }
        }

        .text{
            font-size: 1.4rem;
        }
    }

}

@media screen and (max-width: 750px){
    .section-text{
        padding: 3rem;
    }

    .banner{
        .swiper-container{
            height: 50vw;
            .swiper-name, .swiper-num{
                font-size: 2rem;
                top: 10%;
            }
        }
    }

    .phone-image{
        padding: 10rem 0 0 0;
        .phone_left{
            width: 30%;
        }
        .phone_right{
            width: 30%;
        }
        .phone_text{
            width: 75%;
        }
        .phone_center{
            width: 75%;
        }
    }
    .camera .camera_center{
        padding: 15rem 0;
    }

    #chip-con{
        h1{
            font-size: 4rem;
        }
    }
    .DJI{
        .pc_text{
            .style__line-text-box___2lKKl{
                left: 65% !important;
                .style__line-text-title___3heSp{
                    font-size: 4rem;
                    line-height: 6rem;
                }
                .style__line-text-desc___10dbc{
                    font-size: 2.4rem;
                    line-height: 3.6rem;
                }
            }
        }
    }

    .DJI_whole{
        .style__whole_text{
            .whole_text__feature{
                font-size: 2rem;
                line-height: 2.8rem;
            }
            .whole_text__service{
                font-size: 2rem;
                line-height: 2.8rem;
            }
        }
    }

}
